/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
  Modal,
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  ImageBackground,
  ScrollView,
} from 'react-native';

const RuleModal = ({ visible, onClose, title, rules, imagePath }) => {
    const renderContent = (item, index) => {
        // 如果是行容器，则水平排列其子元素
        if (item.type === 'row') {
          return (
            <View key={index} style={{flexDirection:'row'}}>
              {item.children.map((child, childIndex) => (
                <View key={`${index}-${childIndex}`} style={{ }}>
                  {renderContentItem(child, `${index}-${childIndex}`)}
                </View>
              ))}
            </View>
          );
        }
        // 否则正常渲染单个元素
        return renderContentItem(item, index);
      };
      const renderContentItem = (item, key) => {
        switch (item.type) {
          case 'text':
            return (
              <Text key={key} style={[styles.ruleText, item.style]}>
                {item.content}
              </Text>
            );
          case 'image':
            return (
              <Image
                key={key}
                source={{uri:item.url}}
                style={{width:40,height:40}}
                resizeMode={item.resizeMode || "contain"}
              />
            );
          case 'title':
            return (
              <Text key={key} style={[styles.titleText, item.style]}>
                {item.content}
              </Text>
            );
          default:
            return null;
        }
      };
    return (
      <Modal
        transparent={true}
        visible={visible}
        animationType="fade"
        onRequestClose={onClose}
      >
        <View
          style={styles.modalOverlay}
          activeOpacity={1}
        >
          <View style={styles.modalContainer}>
            <ImageBackground
              style={styles.modalContent}
              source={{ uri: imagePath }}
              resizeMode="stretch"
            >
              <View style={styles.contentWrapper}>
              <ScrollView
              style={styles.scrollView}
              showsVerticalScrollIndicator={false}
            >
              <View style={styles.contentWrapper2}>
                {rules.map((item, index) => renderContent(item, index))}
              </View>
            </ScrollView>
                <TouchableOpacity
                  style={styles.closeButton}
                  onPress={onClose}
                >
                  <Text style={styles.closeButtonText}>×</Text>
                </TouchableOpacity>
              </View>
            </ImageBackground>
          </View>
        </View>
      </Modal>
    );
  };
  
  const styles = StyleSheet.create({
    modalOverlay: {
      flex: 1,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    modalContainer: {
      width: '80%',
      height: '60%', // 控制弹窗整体高度
      justifyContent: 'center',
      alignItems: 'center',
    },
    scrollView:{
      left:'-2%',
      top:'4%',
      width: '100%',
      maxHeight: '69%',
    },
    modalContent: {
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center',
    },
    contentWrapper: {
      width: '100%',
      height: '100%',
      padding: 20,
      justifyContent: 'center',
      alignItems: 'center',
    },
    contentWrapper2: {
      width: '100%',
      height: '100%',
      padding: 20,
      justifyContent: 'center',
    },
    closeButton: {
      position: 'absolute',
      bottom:10,
      width: 30,
      height: 30,
      alignItems: 'center',
      justifyContent: 'center',
    },
    closeButtonText: {
      fontSize: 24,
      color: '#666',
    },
    ruleText: {
      fontSize: 24, 
      color: 'black',
      fontWeight:'bold',
    },
    titleText:{
      fontSize: 24,   
      fontWeight:'bold', 
       
    }
  });

export default RuleModal;